<template>
  <div v-loading="pageLoading">
    <div class="header-btn">
      <div>{{ title }}</div>
      <div>
        <el-button v-show="!fromDetail" :loading="submitLoading" type="primary" @click="addOrUpdateTask">确认
        </el-button>
        <el-button plain type="info" @click="goBack">返回</el-button>
      </div>
    </div>
    <div class="wrap g-card" style="margin-bottom: 16px">
      <div class="title-header">基础设置</div>
      <el-form ref="form" :disabled="fromDetail" :model="form" :rules="rules" label-position="right"
               label-width="120px" style="position: relative">
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-show="!fromDetail" v-model="form.taskName" placeholder="请输入" popper-class="minWidth-inp"
                    style="width: 400px">
          </el-input>
          <div v-show="fromDetail">{{ form.taskName }}</div>
        </el-form-item>
        <el-form-item label="触达方式" prop="sendEdition">
          <el-radio-group v-model="form.sendEdition" :disabled="taskId" @change="scrmPersonSopUserRels = []">
            <el-radio label="1">自动</el-radio>
            <el-radio label="2">手动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.sendEdition == '1'" label="超级企微" required>
          <select-supermicro ref="checkDigitalEmployee" v-model="scrmPersonSopUserRels"
                             :btn-info.sync="supermicroBtnInfo" :disabled="fromDetail"
                             :is-single-option="isSingleOption"></select-supermicro>
        </el-form-item>
        <el-form-item v-if="form.sendEdition == '2'" label="执行员工" required>
          <el-button v-show="!fromDetail" class="button-new-tag" size="small" @click="openStaff">
            <svg-icon icon-class="add"/>
            添加员工
          </el-button>
          <div v-if="scrmPersonSopUserRels.length > 0">
            <el-tag v-for="item in scrmPersonSopUserRels" :key="item.userId" :closable="!fromDetail"
                    @close="handleClose(item)">
              {{ item.userName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="选择客户" required>
          <template v-if="fromDetail">
            <div v-for="item in chooseStaffList" :key="item.label" :label="item.label">
              <span v-if="form.chooseStaff === item.label">{{ item.value }}</span>
            </div>
          </template>
          <template v-else>
            <el-radio-group v-model="form.chooseStaff" @change="reChooseStaff">
              <el-radio v-for="item in chooseStaffList" :key="item.label" :label="item.label">
                {{ item.value }}
              </el-radio>
            </el-radio-group>
          </template>
        </el-form-item>
        <el-form-item v-show="form.chooseStaff === '0' && !fromDetail">
          <el-button class="button-new-tag" size="small" @click="openOptionsDialog">
            <svg-icon icon-class="add"/>
            配置规则
          </el-button>
        </el-form-item>
        <el-form-item v-show="form.chooseStaff === '3' && !fromDetail">
          <el-button class="button-new-tag" size="small" @click="openCustomerDialog">
            <svg-icon icon-class="add"/>
            添加客户
          </el-button>
        </el-form-item>
        <el-form-item v-if="form.chooseStaff === '3'">
          <CustomerTableDel :customerDialog="false" :customerList="customerDto" :followStatusList="followStatusList"
                            :isShowDelBtn="isShowDelBtn" :userSex="userSex" @deletes="deleteCustomer"
                            @filterCustomerMsg="filterCustomerMsg"></CustomerTableDel>
        </el-form-item>
        <!-- {{ showScreen }} -->
        <el-form-item v-if="showScreen">
          <div>筛选类型：{{ screenString }}</div>
          <div>{{ this.chooseCustomer.flag === '2' ? '客户状态：' : '客户分群：' }} {{ customerGroupString }}</div>
        </el-form-item>
        <el-form-item label="备注">
          <div v-if="fromDetail">{{ form.remark }}</div>
          <el-input v-else v-model="form.remark" :autosize="{ minRows: 2 }" maxlength="64" placeholder="请添加备注"
                    show-word-limit style="width: 400px" type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="wrap g-card">
      <div class="title-header">文案及周期设置</div>
      <el-form :model="form" label-position="right" label-width="120px" style="position: relative">
        <el-form-item :label="'共' + form.scrmPersonSopRuleDtos.length + '条规则'" required></el-form-item>
      </el-form>
      <!-- 展示文案内容 -->
      <div v-for="(item, index) in form.scrmPersonSopRuleDtos" :key="index" class="copy-card">
        <el-form ref="copyForm" label-position="right" label-width="120px" style="position: relative">
          <el-form-item label="标题" prop="title">
            <div>{{ item.title }}</div>
          </el-form-item>
          <el-form-item label="发送时间" prop="sendDate">
            <div v-for="i in form.sendEdition == '1'?sendTimeList1:sendTimeList2" :key="i.label">
              <div v-show="item.sendType === i.label">{{ i.value }}</div>
            </div>
            <template v-for="i in item.sendCycle">
              <div v-if="+item.sendType === 1 || +item.sendType === 2" :key="i + 'week'">
                <span v-for="x in weekList" :key="x.dictValue">
                  <span v-show="x.dictValue === i">{{ x.dictLabel }}</span>
                </span>
              </div>
            </template>
            <div v-show="item.sendDate">
              <span>{{ item.sendDate }}</span>
            </div>
          </el-form-item>
          <el-form-item label="文本内容">
            <div>{{ item.content }}</div>
          </el-form-item>
          <el-form-item label="发送内容">
            <div v-for="(x, y) in item.mediaContentDetails" :key="y" class="content-item">
              <div>
                {{ mediaTypeToText[x.materialType * 1] }}：
                {{ x.materialName }}
              </div>
            </div>
          </el-form-item>
          <el-form-item label="二维码">
            <div v-if="+item.qrState === 0" class="content-item">
              {{ qrCodeList[item.qrType * 1] }}：
              {{ item.activityName }}
            </div>
          </el-form-item>
        </el-form>
        <div class="option-span copy-edit">
          <span @click="detailPersonSopRule(index)">详情</span>
          <span v-if="fromDetail" v-hasPermi="['admin:sop:addOrUpdateTempTask']"
                @click="toImplementDetail(index)">执行详情</span>
          <span v-else @click="editPersonSopRule(index)">编辑</span>
        </div>
        <div v-show="!fromDetail" class="right-close" @click="deleteCopyWriting(index)">
          <svg-icon icon-class="right-close"/>
        </div>
      </div>
      <div>
        <el-button v-show="!fromDetail" class="button-new-tag" size="small" style="margin-left: 50px"
                   @click="openPersonSopRule">
          <svg-icon icon-class="add"/>
          添加
        </el-button>
      </div>
    </div>
    <div v-if="form.sendEdition == '1'" class="wrap g-card" style="margin-bottom: 16px">
      <div class="title-header">自动发送设置</div>
      <el-form ref="setForm" :disabled="fromDetail" :model="setForm" :rules="setRules" label-position="right"
               label-width="120px" style="position: relative">
        <div>
          <el-form-item label="发送对象间隔" prop="objectInterval">
            <el-slider
              v-model="setForm.objectInterval"
              :max="120"
              :min="1"
              range
              style="width: 800px">
            </el-slider>
          </el-form-item>
          <div>
            <span style="margin-left: 120px;margin-right: 30px">{{ setForm.objectInterval }}</span>
            <span style="color:#082aff;cursor: pointer" @click="setForm.objectInterval = [3,5]">使用推荐值</span>
          </div>
          <div style="margin-top: 6px">
            <span
              style="margin-left: 120px;color: #ccc">发送对象间隔是指发送上一个客户最后一条消息完毕到下一个客户第一条消息开始发送的间隔时间</span>
          </div>
          <el-form-item label="发送消息间隔" prop="messageInterval">
            <el-slider
              v-model="setForm.messageInterval"
              :max="60"
              :min="1"
              range
              style="width: 800px">
            </el-slider>
          </el-form-item>
          <div>
            <span style="margin-left: 120px;margin-right: 30px">{{ setForm.messageInterval }}</span>
            <span style="color:#082aff;cursor: pointer" @click="setForm.messageInterval = [1,5]">使用推荐值</span>
          </div>
          <div style="margin-top: 6px">
            <span
              style="margin-left: 120px;color: #ccc">发送消息间隔是指发送上一个客户第一条消息完毕到第二条消息开始发送的间隔时间</span>
          </div>
        </div>
      </el-form>
    </div>
    <!-- 筛选客户弹窗 -->
    <ScreenType v-if="form.chooseStaff === '0'" :chooseCustomer.sync="chooseCustomer"
                :followStatusList="followStatusList"
                :tagGroupArr="tagGroupArr" :visible.sync="optionsVisible" @close="optionsCancel">
    </ScreenType>
    <!-- 新增员工弹窗 -->
    <SelectUser :is-active="'1'" :selectList="dialogList3" :visible.sync="staffDialog" title="添加员工"
                @confirm="selectUserConfirm"></SelectUser>
    <!-- 新增客户弹窗 -->
    <CustomerTable :customerDialog="customerDialog" :followStatusList="followStatusList"
                   :scrmPersonSopUserRels="scrmPersonSopUserRels" :activeName.sync="form.sendEdition"
                   :selectCustomerList="customerDto" :userSex="userSex" @addCustomer="getCustomerList"
                   @closeCustomers="closeCustomer"></CustomerTable>
    <!-- 新增文案及周期设置 -->
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" :visible="writingVisible"
               title="文案及周期设置"
               width="680px" @close="copyWritingCancel">
      <AddCopyWriting v-if="writingVisible" :detailForm="copyForm"
                      :editIndex="editIndex" :operateFlag="operateFlag"
                      :sendTimeList="form.sendEdition == '1'?sendTimeList1:sendTimeList2 " :weekList="weekList"
                      @copyWritingCancel="copyWritingCancel"
                      @copyWritingSure="copyWritingSure"></AddCopyWriting>
    </el-dialog>
  </div>
</template>

<script>
import customerTable from './component/customerTable.vue'
import customerTableDel from './component/customerTableDel.vue'
import addCopyWriting from '../../customerOperations/allSop/components/addCopyWriting.vue'
import ScreenType from './component/ScreenType.vue'
import SelectUser from '@/components/SelectUser/index.vue'
import {addOrUpdateTask, queryDeptMsg, queryTaskdetail} from '../../../api/communityOperating/personalSop'
import {nameValidate} from '@/utils/validate'
import {groupLabel} from "@/api/label";
import selectSupermicro from "@/components/selectSupermicro.vue";

export default {
  name: 'CreateRules',
  components: {
    CustomerTable: customerTable,
    CustomerTableDel: customerTableDel,
    AddCopyWriting: addCopyWriting,
    SelectUser,
    ScreenType,
    selectSupermicro
  },
  data() {
    return {
      title: '创建任务', // 页面标题
      deptIdObj: null,
      taskId: undefined, // 数据id
      submitLoading: false,
      loading: false, // 新增员工弹窗
      staffDialog: false, // 新增员工弹窗
      customerDialog: false, // 新增客户弹窗
      customerName: '', // 客户
      customerList: [], // 新增客户数据
      customerDto: [], // 指定客户
      stashCustomerList: [], // 暂存新增的客户数据
      followStatusList: [], // 跟进阶段
      tagGroupArr: [], // v
      total: 0,
      form: {
        // 基础设置
        taskName: '', // 任务名称
        chooseStaff: '1',
        remark: '',
        pageNum: 1,
        pageSize: 10,
        scrmPersonSopRuleDtos: [], // 文案及周期设置
        sendEdition: '1',
      },
      scrmPersonSopUserRels: [], // 执行员工
      rules: {
        taskName: [
          {
            required: true,
            validator: nameValidate('任务'),
            trigger: 'change',
          },
        ],
        title: [
          {required: true, message: '请输入文案内容', trigger: 'change'},
        ],
        scrmPersonSopRuleDtos: [
          {required: true, message: '请选择文案及周期设置', trigger: 'change'}
        ],
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      dialogList1: [], // 公司架构
      staffName: '', // 搜索名字
      staffList: [], // 第二列勾选内容
      dialogList2: [], // 选择人员
      dialogList3: [], // 已经勾选的人员
      writingVisible: false,
      operateFlag: '',
      copyForm: {
        title: '', // 文案内容
        sendType: '1',
        sendDate: '', // 发送时间
        sendCycle: [], // 周期提醒
        mediaContentDetails: [], // 素材
        qrState: '1',
        materialList: [],
        messagePushId: '',
      },
      editIndex: null, // 控制是添加打开弹窗，清空内容
      addDisabled: false, // 文案查看详情
      allId: [],
      userSex: [], // 性别
      fileList: [],
      weekList: [], // 周期提醒
      // 发送时间列表
      sendTimeList1: [
        {
          label: '1',
          value: '指定日期',
        },
        {
          label: '2',
          value: '周期提醒',
        },
      ],
      sendTimeList2: [
        {
          label: '1',
          value: '指定日期',
        },
        {
          label: '2',
          value: '周期提醒',
        },
        {
          label: '4',
          value: '单次提醒',
        },
      ],
      // 选择客户
      chooseStaffList: [
        {
          label: '1',
          value: '全部客户',
        },
        {
          label: '0',
          value: '筛选客户',
        },
        {
          label: '3',
          value: '指定客户',
        },
      ],
      // 路由参数-详情: '1',编辑: null
      fromDetail: false,
      showScreen: false, // 为筛选客户时展示
      optionsVisible: false, // 配置规则弹窗
      chooseCustomer: {
        flag: '', // 2-跟进状态 3-客户分群
        value: [],
      },
      materVisible: false,
      materForm: {},
      mediaTypeToText: {
        11: 'h5链接',
        5: '海报',
        3: '文件',
        4: '文章',
        99: '险种',
        7: '多媒体',
        8: '本地上传',
        9: '',
        10: '问卷',
        66: '小程序',
        100: '本地上传文件',
      },
      qrCodeList: {
        1: '员工码',
        2: '渠道活码',
        3: '群活码',
      },
      isShowDelBtn: false,
      supermicroBtnInfo: '添加员工',
      isSingleOption: false,
      setForm: {
        objectInterval: [3, 5],
        messageInterval: [1, 5],
      },
      setRules: {},
      pageLoading: false, // 页面加载动画
      activeName: this.$route.query.activeName,
    }
  },
  computed: {
    // 筛选类型
    screenString() {
      let screenString = ''
      if (this.chooseCustomer.flag === '2') {
        screenString = '跟进状态'
      } else if (this.chooseCustomer.flag === '4') {
        screenString = '客户分群'
      } else {
        screenString = ''
      }
      return screenString
    },
    // 客户状态/客户分群
    customerGroupString() {
      // console.log('customerGroupString');

      let customerGroupString = ''
      // 客户分群
      if (
        this.chooseCustomer.value.length &&
        this.chooseCustomer.flag === '2'
      ) {
        this.followStatusList.forEach((item) => {
          customerGroupString += this.chooseCustomer.value.includes(
            item.dictValue
          )
            ? item.dictLabel + ','
            : ''
        })
      } else if (
        this.chooseCustomer.value.length &&
        this.chooseCustomer.flag === '4'
      ) {
        // 客户状态
        customerGroupString = this.chooseCustomer.value.toString()
        // this.followStatusList.forEach((item) => {
        //   customerGroupString += this.chooseCustomer.value.includes(
        //     item.dictValue
        //   )
        //     ? item.dictLabel + ','
        //     : ''
        // })
      } else {
        customerGroupString = ''
      }
      console.log('customerGroupString', customerGroupString);
      return customerGroupString
    },
  },
  watch: {
    // 页面展示配置规则
    chooseCustomer: {
      immediate: true,
      handler() {
        console.log(this.form.chooseStaff, this.chooseCustomer, 'pppp');
        if (
          this.form.chooseStaff === '0' &&
          this.chooseCustomer.value.length > 0
        ) {
          this.showScreen = true
        }
      },
    },
  },
  created() {
    // 性别
    this.getDicts('sys_user_sex').then((res) => {
      if (res.code === 200) {
        this.userSex = res.data
      }
    })
    // 周期
    this.getDicts('sys_sop_cycle').then((res) => {
      if (res.code === 200) {
        this.weekList = res.data
      }
    })
    // 跟进阶段 sys_customer_trackStat
    this.getDicts('follow_states').then((res) => {
      if (res.code === 200) {
        this.followStatusList = res.data
      }
    })
    groupLabel().then(res => {
      if (res.code == 200) this.tagGroupArr = res.data
      else this.$message.error(res.msg)
    })
  },
  mounted() {
    this.queryTaskdetail()
  },
  methods: {
    // 初始化查询
    queryTaskdetail() {
      // 路由跳转带来得参数信息
      this.fromDetail = this.$route.query.fromDetail == '1' ? true : false
      this.isShowDelBtn = this.$route.query.fromDetail ? true : false
      this.taskId = this.$route.query.taskId || undefined
      if (this.fromDetail && this.taskId) {
        this.title = '查看详情'
      } else if (this.taskId) {
        this.title = '编辑任务'
      } else {
        this.title = '创建任务'
      }
      if (this.taskId) {
        this.pageLoading = true
        queryTaskdetail({taskId: this.taskId}).then((res) => {
          if (res.code === 200) {
            this.form = {
              ...res.data,
              ...res.data.scrmPersonSop,
              sendEdition: String(res.data?.scrmPersonSop?.sendEdition) || '1'
            }
            if (String(res.data?.scrmPersonSop?.sendEdition) == '1') {
              this.setForm.messageInterval = res.data?.scrmPersonSop?.messageInterval ? JSON.parse(res.data?.scrmPersonSop?.messageInterval) : [1, 5]
              this.setForm.objectInterval = res.data?.scrmPersonSop?.objectInterval ? JSON.parse(res.data?.scrmPersonSop?.objectInterval) : [3, 5]
            }
            this.scrmPersonSopUserRels = res.data?.scrmPersonSopUserRels || []
            this.customerDto = res.data?.customerDto || []
            this.$set(this, 'chooseCustomer', res.data.chooseCustomer || {
              flag: '',
              value: [],
            })
            // console.log('this.chooseCustomer', this.chooseCustomer);
            this.form.chooseStaff =
              res.data.chooseStaff || res.data.scrmPersonSop.chooseStaff || ''
          }
          this.pageLoading = false
        }).catch(() => {
          this.pageLoading = false
        })
      }
    },
    // 查询添加员工的信息
    queryDeptMsg() {
      this.dialogList1 = []
      queryDeptMsg().then((res) => {
        if (res.code === 200 && res.data.length) {
          res.data.forEach((item) => {
            this.dialogList1.push({
              id: item.deptId,
              label: item.deptName,
              children: null,
            })
          })
        }
      })
    },
    // 添加
    add() {
      this.staffDialog = true
    },
    // 选择员工按钮切换
    reChooseStaff() {
      this.customerDto = [] // 选择客户
      this.chooseCustomer.flag = '' // 配置规则
      this.chooseCustomer.value = [] // 配置规则
      this.showScreen = false
    },
    // 配置规则-打开弹窗
    openOptionsDialog() {
      this.optionsVisible = true
      this.chooseCustomer.flag = this.chooseCustomer.flag || '2'
    },
    // 配置规则-取消
    optionsCancel(type, value) {
      this.optionsVisible = type
      this.chooseCustomer = value
    },
    // 添加员工-打开弹窗
    openStaff() {
      this.dialogList3 = this.scrmPersonSopUserRels || []
      this.staffDialog = true
    },
    // 删除添加员工
    handleClose(item) {
      this.scrmPersonSopUserRels = this.scrmPersonSopUserRels.filter((x) => {
        return x.userId != item.userId
      })
    },
    // 弹窗的确认
    selectUserConfirm(value) {
      this.staffDialog = false
      this.scrmPersonSopUserRels = []
      value.forEach((item) => {
        this.scrmPersonSopUserRels.push({
          taskId: this.taskId,
          ...item,
        })
      })
      this.dialogList2 = []
      this.dialogList1 = []
    },
    // 弹窗的关闭
    staffClose() {
      this.dialogList3 = []
    },
    // 打开添加客户弹窗
    openCustomerDialog() {
      if(this.scrmPersonSopUserRels.length == 0) return this.$message.error(this.form.sendEdition == '1' ? '请先选择超级企微' : '请先选择员工' )
      this.customerDialog = true
    },
    // 新增客户弹窗
    getCustomerList(data) {
      this.customerDto = data
      this.closeCustomer(false)
    },
    // 关闭客户弹窗
    closeCustomer(type) {
      this.customerDialog = type
    },
    // 删除选中的指定客户
    deleteCustomer(index) {
      this.customerDto.splice(index, 1)
    },
    // 过滤指定客户
    filterCustomerMsg(data) {
      this.customerDto = []
      this.customerDto = this.customerDto.filter((item) => {
        return (
          item.userName.indexOf(data.customerName) >= 0 &&
          item.followStatus.indexOf(data.followStatus) >= 0
        )
      })
    },

    // 确认
    addOrUpdateTask() {
      console.log(this.taskId)
      if (this.form.scrmPersonSopRuleDtos.length == 0) return this.$message.error('请设置至少一条规则!')
      if (this.scrmPersonSopUserRels.length == 0 && this.form.sendEdition == '1') return this.$message.error('请选择超级企微')
      if (this.scrmPersonSopUserRels.length == 0 && this.form.sendEdition == '2') return this.$message.error('请选择执行员工')
      let scrmGroupSopMaterialList = new Array()
      let selectUser = JSON.parse(JSON.stringify(this.scrmPersonSopUserRels))
      if (this.form.sendEdition == '1') {
        let arr = JSON.parse(JSON.stringify(this.form.scrmPersonSopRuleDtos))
        scrmGroupSopMaterialList = arr.map(item => {
          return {
            ...item,
            sendCycle: item?.sendCycle.toString(),
            mediaContentDetails: item?.mediaContentDetails.map(itm => {
              if (itm.mediaType == '3') {
                itm.materialUrl = window.globalConfig.SHARE_URL + '/linkFile?id=' + itm.id
              } else if (itm.mediaType == '4') {
                itm.materialUrl = window.globalConfig.SHARE_URL + '/linkArticle?id=' + itm.id
              } else if (itm.mediaType == '10') {
                itm.materialUrl = window.globalConfig.SHARE_URL + '/linkForm?id=' + itm.id
              } else if (itm.mediaType == '7') {
                if (itm?.content == '6') {
                  itm.materialUrl = window.globalConfig.SHARE_URL + '/linkVideo?id=' + itm.id
                }
              }
              return itm
            })
          }
        })
        console.log(scrmGroupSopMaterialList, 'scrmGroupSopMaterialList', arr)
        selectUser = selectUser.map(item => {
          return {
            ...item,
            userId: item.weUserId || item.userId
          }
        })
      } else {
        scrmGroupSopMaterialList = this.form.scrmPersonSopRuleDtos.map(item => {
          item.sendCycle = item.sendCycle.toString()
          return item
        })
      }
      let obj = {
        taskId: this.taskId,
        chooseStaff: this.form.chooseStaff,
        sendEdition: this.form.sendEdition,
        scrmPersonSop: {
          ...this.form,
          objectInterval: this.setForm.objectInterval ? JSON.stringify(this.setForm.objectInterval) : '',
          messageInterval: this.setForm.messageInterval ? JSON.stringify(this.setForm.messageInterval) : '',
        }, // /基础设置
        // scrmPersonSopUserRels: this.scrmPersonSopUserRels, // 执行员工
        scrmPersonSopUserRels: selectUser, // 执行员工
        scrmPersonSopCustomerRels: [], // 选择客户
        customerDto: this.customerDto, // 指定客户
        scrmPersonSopRuleDtos: scrmGroupSopMaterialList, // 文案及周期设置
        chooseCustomer: this.chooseCustomer, // 筛选客户
      }
      this.submitLoading = false
      console.log(this.$refs.form, this.$refs['form'], '1455')
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.submitLoading = true
          addOrUpdateTask(obj).then((res) => {
            if (res.code === 200) {
              if (this.$route.query.taskId) {
                this.$message.success('编辑成功')
              } else {
                this.$message.success('新增成功')
              }
              this.$router.push({name: 'PersonalSop', query: {activeName: this.$route.query.activeName}})
            }
            this.submitLoading = false
          })
            .catch(() => {
              this.submitLoading = false
            })
        } else {
          this.$message.error('你还未录入完成，请核对后提交！')
        }
      })
    },
    // 返回
    goBack() {
      this.$router.push({name: 'PersonalSop', query: {activeName: this.$route.query.activeName}})
    },
    // 跳转执行详情
    toImplementDetail(index) {
      this.$router.push({
        path: 'implementDetail',
        query: {
          ...this.form.scrmPersonSopRuleDtos[index],
        },
      })
    },
    // 关闭弹窗
    copyWritingCancel() {
      this.writingVisible = false
      this.operateFlag = ''
    },
    // 打开新增文案的弹窗
    openPersonSopRule() {
      this.editIndex = null
      this.operateFlag = 'ADD'
      this.copyForm = {
        title: '', // 文案内容
        sendType: '1',
        sendDate: '', // 发送时间
        sendCycle: [], // 周期提醒
        mediaContentDetails: [], // 素材
        qrState: '1',
      }
      this.writingVisible = true
    },
    // 新增文案
    copyWritingSure(data) {
      // 编辑
      if (data.editIndex === null) {
        // 新增
        this.form.scrmPersonSopRuleDtos.push(data.copyForm)
      } else {
        this.form.scrmPersonSopRuleDtos[data.editIndex] = data.copyForm
      }
      this.writingVisible = false
    },
    // 文案详情
    detailPersonSopRule(index) {
      this.copyForm = this.form.scrmPersonSopRuleDtos[index]
      this.operateFlag = 'DETAIL'
      this.editIndex = index
      this.writingVisible = true
    },
    // 编辑文案
    editPersonSopRule(index) {
      this.copyForm = JSON.parse(JSON.stringify(this.form.scrmPersonSopRuleDtos[index]))
      this.operateFlag = 'EDIT'
      this.editIndex = index
      this.writingVisible = true
    },
    // 删除文案内容
    deleteCopyWriting(index) {
      this.form.scrmPersonSopRuleDtos.splice(index, 1)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../../../styles/base.scss';

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}

.dialog-wrap {
  display: flex;
  justify-content: flex-start;

  .dialog-list {
    width: 33%;
    padding: 0 15px;
    box-sizing: border-box;
    max-height: 500px;
    overflow: auto;

    &:nth-child(2) {
      flex: 1;
      border-left: $normalBorder;
      border-right: $normalBorder;
    }
  }

  .block-wrap {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-weight: 600;
    color: #2a2a2a;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;

    .block-item {
      width: 80px;
      padding: 5px 0;
      margin: 10px;
      border: $normalBorder;
      text-align: center;

      .svg-icon {
        width: 4em;
        height: 3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    }
  }

  .upload-list {
    display: flex;
    justify-content: space-between;
    border: $normalBorder;
    padding: 0 10px;
  }
}

.copy-card {
  width: 740px;
  background-color: #fafafa;
  position: relative;
  margin: 0 0 10px 32px;

  .content-item {
    width: 400px;
    background-color: #e9e9e9;
    padding: 0 10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
  }

  .copy-edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .right-close {
    position: absolute;
    right: -2px;
    top: -2px;
  }
}

::v-deep {
  .el-textarea .el-input__count {
    bottom: -5px;
    right: -38px;
  }
}
</style>
